<template>
  <div @click="fatherClick">
    <!-- 事件修饰符:
    @事件名.修饰符
    .stop:阻止冒泡
    .prevent:阻止默认行为 -->
    <button @click.stop="sonClick">点我阻止冒泡</button>
    <!-- 事件修饰符可以连点,表示应用多个修饰符

    <a @click.prevent.stop="goToHeima" href="https://www.itheima.com">去黑马</a>
    事件可以不绑定事件处理函数,直接用修饰符 -->
    <a @click.prevent.stop href="https://www.itheima.com">去黑马</a>
  </div>
</template>

<script>
export default {
  name: 'VuecliDemoApp',

  data() {
    return {
      
    }
  },

  methods: {
    sonClick(e) {
      console.log('儿子被点了')
      // e.stopPropagation() //阻止冒泡
    },
    fatherClick() {
      console.log('爸爸被点了')
    },
  },
};
</script>

<style lang="scss" scoped>

</style>